<template>
	<view class="mph100 bf ptb30">
		<view class="plr30">
			<view class="mb30 p30 border-r1 bgf5">
				<view class="flex mb10">
					<text
						class="flex1">设备类型：{{ info.device_type == 1 ? '换电柜' : info.device_type == 2 ? '租车' : info.device_type == 3 ? '充电柜' : '' }}</text>

					<text
						:class="info.deviceStatus == 1 ? 'green' : info.deviceStatus == 2 ? 'c9' : info.deviceStatus == 3 ? 'danger' : 'c3'">
						{{ info.deviceStatus == 1 ? '运行中' : info.deviceStatus == 2 ? '离线' : info.deviceStatus == 3 ? '设备故障' : '--' }}
					</text>
				</view>
				<view class="mb10">设备编号：{{ info.device_no || '' }}</view>
				<view class="mb10">管理者：{{ info.operateName || '' }}</view>
				<view class="flex">
					<text class="whn">设备地址：</text>
					<view class="flex1">
						<text class="c9" v-if="info.distance < 1000">{{ info.distance || '' }}m</text>
						<text class="c9" v-else>{{ (info.distance / 1000).toFixed(2) }}km</text>
						<text class="plr10 c9">|</text>
						<text class="primary" @click="navigation">{{ info.address }}</text>
					</view>
				</view>
			</view>
			<view class="flex_sb mb30 plr30 ptb20 tac bgf5">
				<view class="flex1">
					<view class="mb10">{{ info.countMd }}</view>
					<view>满电</view>
				</view>
				<view class="flex1">
					<view class="mb10">{{ info.countCdz }}</view>
					<view>充电中</view>
				</view>
				<view class="flex1">
					<view class="mb10">{{ info.countKc }}</view>
					<view>空仓</view>
				</view>
				<view class="flex1">
					<view class="mb10">{{ info.countFault }}</view>
					<view>故障仓</view>
				</view>
				<view class="flex1">
					<view class="mb10">{{ info.countNoClose }}</view>
					<view>未关门</view>
				</view>
			</view>
			<view class="flex_a h70 mb30 plr24 bd border-r1">
				<text class="pr40">仓门状态：</text>
				<view class="flex1 flex_sb">
					<view class="flex_a">
						<view class="minSquare bd-warning"></view>
						<text>有电仓</text>
					</view>
					<view class="flex_a">
						<view class="minSquare bd-green"></view>
						<text>空仓位</text>
					</view>
					<view class="flex_a">
						<view class="minSquare bd-danger"></view>
						<text>故障仓位</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 电池列表 start -->
		<view class="btBox_w mb40 plr10 ft22">
			<view class="btBox_item" v-for="(boxList, boxIndex) in list" :key="boxIndex">
				<block v-for="(item, index) in boxList" :key="item.cabinet_no">
					<view style="position: relative;overflow: hidden;"
						class="flex_aj column w220 h200 mb20 mlr10 plr10 ptb10 "
						:class="item.status == 0 ? 'bd-green' : item.status == 1 || item.status == 2 ? 'bd-warning' : 'bd-danger'"
						@click="maintOpenDoor(item)">
						<view v-if="cabinet_no == item.cabinet_no"
							style="position: absolute;top: -65upx;right: -65upx;background-color: #2879fc;color: #fff;text-align: center;width: 130upx;height: 130upx;line-height: 200upx;transform: rotate(45deg);font-size: 26upx;font-weight: 700;">
							选中
						</view>
						<view class="">仓门号{{ item.cabinet_no }}</view>
						<view class="pw100 tac" style="word-wrap:break-word" v-if="item.goods_no">{{ item.goods_no }}
						</view>
						<!-- 充电柜的状态 -->
						<view class="" v-if="type == 3">
							{{ item.status == 0 ? '空仓位' : item.status == 1 ? '充电中' : item.status == 2 ? '已满' : item.status == 5 ? '故障' : '--' }}
						</view>
						<!-- 换电柜的状态 -->
						<block v-if="type == 1">
							<view v-if="item.status == 0">空仓位</view>
							<view v-else-if="item.status == 5">故障</view>
							<view v-else>
								<view class="">DC{{ item.type_vt || '--' }}V</view>
								<view class="flex_a h40" v-if="item.status == 1">
									<view class="icon_bat bat_warn">
										<view class="bat_c" :style="{ width: item.electric + '%' }"></view>
									</view>
									<text class="pl10">{{ item.electric }}%</text>
								</view>
								<view class="flex_a h40" v-if="item.status == 2">
									<view class="icon_bat bat_warn">
										<view class="bat_c" :style="{ width: '100%' }"></view>
									</view>
									<text class="pl10">{{ 100 }}%</text>
								</view>
							</view>
						</block>
					</view>
				</block>
			</view>
		</view>

		<!-- <view class="flex_a flexWW mb40 plr10 ft22">
			<block v-for="(item, index) in info.boxChannelList" :key="item.cabinet_no">
				<view
					class="flex_aj column w220 h200 mb20 mlr10 plr10 ptb10 border-r1"
					:class="item.status == 0 ? 'bd-green' : item.status == 1 || item.status == 2 ? 'bd-warning' : 'bd-danger'"
					@click="maintOpenDoor(item)"
				>
					<view class="">仓门号{{ item.cabinet_no }}</view>
					<view class="pw100 tac" style="word-break: break-word;">{{ item.goods_no }}</view>

					<view class="" v-if="type == 3">
						{{ item.status == 0 ? '空仓位' : item.status == 1 ? '充电中' : item.status == 2 ? '已满' : item.status == 5 ? '故障' : '--' }}
					</view>
					<block v-else>
						<view v-if="item.status == 0">空仓位</view>
						<view v-else-if="item.status == 5">故障</view>
						<view v-else>
							<view class="">DC{{ item.type_vt || '--' }}V</view>
							<view class="flex_a h40" v-if="item.status == 1">
								<view class="icon_bat bat_warn"><view class="bat_c" :style="{ width: item.electric + '%' }"></view></view>
								<text class="pl10">{{ item.electric }}%</text>
							</view>
							<view class="flex_a h40" v-if="item.status == 2">
								<view class="icon_bat bat_warn"><view class="bat_c" :style="{ width: '100%' }"></view></view>
								<text class="pl10">{{ 100 }}%</text>
							</view>
						</view>
					</block>
				</view>
			</block>
		</view> -->
		<!-- 电池列表 end -->

		<!-- 开门   通电   关电 -->
		<view style="display: flex;justify-content: space-around;align-items: center;padding:0 30px;">
			<view class="">
				<view class="btn green" @click="openDoorFn(3)">开门</view>
				<view class="btn blue" @click="openAll">一键开柜</view>
			</view>
			<view class="blue search" @click="deviceDetail">刷新</view>
			<view class="">
				<view class="btn red" @click="openDoorFn(4)">通电</view>
				<view class="btn blue" @click="openDoorFn(5)">断电</view>
			</view>

		</view>

		<view class="plr100 mb30">
			<u-button type="primary" shape="circle"
				@click="routerLink({ path: '/pages/admin/alarmList/index', query: { deviceId: query.deviceId } })">历史异常
			</u-button>
		</view>
	</view>
</template>

<script>
	import {
		deviceDetail,
		maintOpenDoor,
		deviceDoorPowerOn
	} from '@/api/admin.js'
	export default {
		data() {
			return {
				type: 3, //  1:换电柜 2：租车 3：充电柜
				info: {
					boxChannelList: []
				},
				list: [],
				cabinet_no: '',
			}
		},
		onLoad(e) {
			this.query = e
			this.type = e.type || 1
			// 设备类型1:换电柜 2：租车 3：充电柜
			uni.setNavigationBarTitle({
				title: (e.type == 1 ? '换电柜' : '充电柜') + '设备详情'
			})
			this.deviceDetail()
		},
		methods: {
			async deviceDetail() {
				const res = await deviceDetail(this.query)
				this.info = res.data
				const cols = res.data.cols
				const rows = res.data.rows
				const list = res.data.boxChannelList
				const newArr = []

				for (let j = 0; j < cols; j++) {
					if (list[j * rows]) {
						newArr.push(list.slice(j * rows, j * rows + rows))
					}
				}
				console.log(2222, newArr)

				this.list = newArr
				this.cabinet_no = this.list[0][0].cabinet_no
			},
			async openDoorFn(num) { //	命令类型 3开门 4通电 5关电
				if (!this.cabinet_no) {
					this.toast('请选择仓门')
					return false
				}
				const result = await this.confirm({
					content: num == 3 ? '确定打开' + this.cabinet_no + '号仓吗?' : num == 4 ? '确定给' + this
						.cabinet_no + '号仓通电吗?' : num == 5 ? '确定给' + this.cabinet_no + '号仓断电吗' : ''

				})
				if (result.confirm) {
					const res = await deviceDoorPowerOn({
						deviceNo: this.info.device_no || '',
						cabinetNo: this.cabinet_no || '',
						openType: num,
					})
					this.toast('操作成功')
					setTimeout(() => {
						this.deviceDetail()
					}, 2000)

				}
			},

			async openAll() {
				const result = await this.confirm({
					content: '确定打开所有仓门吗'
				})
				console.log('2222', this.info.boxChannelList.map(item => item.cabinet_no), this.info.boxChannelList
					.length);
				if (result.confirm) {
					// const door = this.info.boxChannelList.map(item => item.cabinet_no)
					// door.forEach((i) => {
					// 	maintOpenDoor({
					// 		deviceNo: this.info.device_no,
					// 		door: i
					// 	})
					// })
					let num = this.info.boxChannelList.length || 0
					if (num > 0) {
						let counter = 0;
						const intervalId = setInterval(() => {
							counter++;
							if (counter <= num) {
								// console.log(counter);
								maintOpenDoor({
									deviceNo: this.info.device_no,
									door: counter
								})
							}

							if (counter > num) {
								clearInterval(intervalId);
							}
						}, 1500);
					}


				}
			},
			async maintOpenDoor(item) {
				this.cabinet_no = item.cabinet_no
				// const result = await this.confirm({
				// 	content: '确定打开' + item.cabinet_no + '仓门吗'
				// })

				// if (result.confirm) {
				// 	const res = await maintOpenDoor({
				// 		deviceNo: this.info.device_no,
				// 		door: item.cabinet_no
				// 	})

				// 	this.toast('发送成功')
				// }
			},
			navigation() {
				// 因后端传过来的经纬度是百度的， 所以要经过转化成腾讯经纬度
				// let lng = this.info.lng
				// let lat = this.info.lat
				// let pi = (3.14159265358979324 * 3000.0) / 180.0;
				// let x = lng - 0.0065;
				// let y = lat - 0.006;
				// let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi);
				// let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi);
				// lng = z * Math.cos(theta);
				// lat = z * Math.sin(theta);
				uni.openLocation({
					latitude: this.info.lat * 1,
					longitude: this.info.lng * 1,
					name: this.info.device_name,
					address: this.info.address,
					success: () => {}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$minsize: 26upx;
	$green: #07c160;
	$warning: #ffad00;
	$danger: #ff6600;

	.btBox_w {
		// width: 100%;
		// overflow-x: auto;
		// white-space: nowrap;
		text-align: center;

		.btBox_item {
			display: inline-block;
			vertical-align: middle;
		}
	}

	.minSquare {
		width: $minsize;
		height: $minsize;
		margin-right: 14upx;
	}

	.bd-green {
		border: 1px solid $green;
		color: $green;
	}

	.bd-warning {
		border: 1px solid $warning;
		color: $warning;
	}

	.bd-danger {
		border: 1px solid $danger;
		color: $danger;
	}

	.icon_bat {
		position: relative;
		width: 30upx;
		height: 16upx;
		padding: 2upx;
		border: 1px solid $green;

		&::after {
			position: absolute;
			right: -4upx;
			top: 50%;
			transform: translateY(-50%);
			content: '';
			width: 4upx;
			height: 10upx;
			background-color: $green;
		}

		.bat_c {
			height: 8upx;
			background-color: $green;
		}
	}

	.bat_warn {
		border: 1px solid $warning;

		&::after {
			background-color: $warning;
		}

		.bat_c {
			background-color: $warning;
		}
	}

	.bat_danger {
		border: 1px solid $danger;

		&::after {
			background-color: $danger;
		}

		.bat_c {
			background-color: $danger;
		}
	}

	.refresh_w {
		width: 80upx;
		height: 80upx;
		background: linear-gradient(0deg, #3282ff, #90bafc);
		box-shadow: 0upx 0upx 20upx 0upx rgba(50, 130, 255, 0.5);
		border-radius: 50%;
	}

	.btn {
		border-radius: 10%;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		color: #fff;
		font-size: 35upx;
		font-weight: 700;
		width: 200upx;
		margin-bottom: 30upx;
	}

	.search {
		font-size: 35upx;
		font-weight: 700;
		color: #fff;
		text-align: center;
		width: 140upx;
		height: 140upx;
		line-height: 140upx;
		border-radius: 50%;
	}

	.green {
		background-color: #46c85c;
	}

	.blue {
		background-color: #3282ff;
	}

	.red {
		background-color: #e6212a;
	}
</style>